<template>
  <div class="container">
    <el-form ref="form" :model="filterForm">
      <el-form-item>
        <el-date-picker
          type="date"
          placeholder="选择开始日期"
          v-model="filterForm.startDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 150px;">
        </el-date-picker>
        <el-date-picker
          type="date"
          placeholder="选择结束日期"
          v-model="filterForm.endDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 150px; margin-left: 10px;">
        </el-date-picker> 
        <el-select
          v-model="filterForm.country"
          :placeholder='filterForm.show1'
          @change="selectGet1"
          filterable
          clearable
          class='normal-input'
          style="width: 150px; margin-left: 10px;">
          <el-option
            v-for="item in countries"
            :key='item.value'
            :label='item.name'
            :value='item.value'>
          </el-option>
        </el-select>
        <el-select
          v-model="filterForm.endCountry"
          :placeholder='filterForm.show2'
          @change="selectGet2"
          filterable
          clearable
          class='normal-input'
          style="width: 150px; margin-left: 10px;">
          <el-option
            v-for="item in endcountries"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select
          v-model="filterForm.source"
          :placeholder='filterForm.show3'
          @change="selectGet3"
          filterable
          clearable
          class='normal-input'
          style="width: 150px; margin-left: 10px;">
          <el-option
            v-for="item in source"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter(0)" style="margin-left: 10px;">筛选</el-button>
        <el-button class="filter-item" type="primary" plain icon="el-icon-refresh" @click="handleFilter(1)" style="margin-left: 10px;">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="orderList" v-loading="loading" border fit el-tabl stripe
      style="width: 100%;">
      <el-table-column prop="id" align="center" label="编号" width="0" v-if="false">
      </el-table-column>
      <el-table-column prop="orderNum" align="center" label="订单编号" width="150">
      </el-table-column>
      <el-table-column prop="country" align="center" min-width="150px" label="外商国别" sortable>
      </el-table-column>
      <el-table-column prop="orderDate" align="center" min-width="150px" label="订单日期" sortable>
      </el-table-column>
      <el-table-column prop="deliveryDate" align="center" min-width="150px" label="交货日期" sortable>
      </el-table-column>
      <el-table-column prop="Customs" align="center" min-width="150px" label="报关地海关" sortable>
      </el-table-column>
      <el-table-column prop="amount" align="center" min-width="150px" label="总金额" sortable>
      </el-table-column>
      <el-table-column prop="currency" align="center" min-width="100px" label="币种" sortable>
      </el-table-column>
      <el-table-column prop="status" align="center" min-width="100px" label="状态"  :filter-method="filterTag" :filters="[{ text: '在手订单', value: '在手订单' }, { text: '出货订单', value: '出货订单' }]" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '在手订单' ? 'success' : 'warning'" disable-transitions>{{scope.row.status}}</el-tag>
        </template>>
      </el-table-column>
      <el-table-column min-width="100px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" plain @click="handleView(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background
        layout='total, prev, pager, next'
        :total='total'
        :page-count='count'
        :page-size='size'
        :current-page='pageCurrent'
        @current-change='handleCurrentChange'>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getCorpOrderList,
  getOrderInfo3001,
  getOrderInfo3003,
  getOrderSearch
} from '@/api/order';

export default {
  name: 'Orderlist',
  data() {
    return {

      filterForm: {
        startDate: '',
        endDate: '',
        country: '',
        countryKey: '',
        endCountry: '',
        endCountryKey: '',
        source: '',
        sourceKey: '',
        show1: '获取数据中，请稍后...',
        show2: '获取数据中，请稍后...',
        show3: '获取数据中，请稍后...'
      },
      countries: [],
      endcountries: [],
      source: [],
      orderList: [],
      filter: false,
      total: 0,
      count: 0,
      pageCurrent: 1,
      size: 5,
      loading: false
    };
  },
  created() {
    // //初始化列表
    this.initOrderChange();
  },
  watch: {
    $route(to, from) {
      console.log('from', from);
      var orderid = to;
      console.log('watch ', orderid.name);
      if (orderid.name == 'companyOrder') {
        this.getCorpOrderInfoList('1');
      }
    }
  },
  methods: {
    // 当前的页码，改变时会触发
    handleCurrentChange: function(currentPage) {
      if (this.filter == true) {
        this.getOrderSearch(currentPage);
      } else {
        this.getCorpOrderInfoList(currentPage);
      }
    },
    selectGet1(vId) {
      let obj = {};
      obj = this.countries.find(item => {
        return item.value === vId;
      });
      this.filterForm.countryKey = obj.key;
    },
    selectGet2(vId) {
      let obj = {};
      obj = this.endcountries.find(item => {
        return item.value === vId;
      });
      this.filterForm.endCountryKey = obj.key;
    },
    selectGet3(vId) {
      let obj = {};
      obj = this.source.find(item => {
        return item.value === vId;
      });
      this.filterForm.sourceKey = obj.key;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    handleFilter(type) {
      //搜索数据
      if (type == 0) {
        this.filter = true;
        this.getOrderSearch('1');
      } else {
        this.filter = false;
        this.filterForm.startDate = '';
        this.filterForm.endDate = '';
        this.filterForm.country = '';
        this.filterForm.endCountry = '';
        this.filterForm.source = '';
        this.filterForm.countryKey = '';
        this.filterForm.endCountryKey = '';
        this.filterForm.sourceKey = '';
        this.getCorpOrderInfoList('1');
      }
    },
    handleView(row) {
      console.log('获取order', row);
      localStorage.setItem('orderID', row.id);
      this.$router.push({ path: '/orderDetail', query: { id: row.id } });
    },
    initOrderChange() {
      let that = this;
      var lenth = this.orderList.length;
      that.orderList.splice(0, lenth);
      //初始化所有选项
      getOrderInfo3001('3003') //国别地区//已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                key: i.configKey,
                value: i.configValue
              };
              that.countries.push(map);
              that.endcountries.push(map);
            }
            that.filterForm.show1 = '请选择外商国别';
            that.filterForm.show2 = '请选择抵运国';
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3003() //港口，已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                key: i.wharfCode,
                value: i.wharfName + '(' + i.wharfEnName + ')'
              };
              that.source.push(map);
            }
            that.filterForm.show3 = '请选择目的港口';
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      that.getCorpOrderInfoList('1');
    },
    getCorpOrderInfoList(page) {
      let that = this;
      //刷新页面
      that.loading = true;
      var corpid = localStorage.getItem('corpID');
      console.log('getList ', corpid);
      getCorpOrderList(corpid, page)
        .then(data => {
          that.loading = false;
          var myData = data.data;
          console.log('getOrderList ', myData);
          if (myData.length <= 0) {
            var lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
          } else {
            lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    },
    getOrderSearch(page) {
      let that = this;
      that.loading = true;
      getOrderSearch(
        that.filterForm.startDate,
        that.filterForm.endDate,
        that.filterForm.countryKey,
        that.filterForm.endCountryKey,
        that.filterForm.sourceKey,
        page
      )
        .then(data => {
          that.loading = false;
          var myData = data.data;
          if (myData.length <= 0) {
            var lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
          } else {
            lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
              that.loading = false;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    }
  }
};
</script>
<style>
</style>
